<template>
  <div>
    <el-row class="bg-white">
      <el-col :md="24" class="title">
        <i class="fa fa-list-ul mr-[0.416em]"></i>
        <span>最热文集</span>
      </el-col>
      <el-col :md="24">
        <ul>
          <li v-for="item in hot_post" class="truncate border border-solid border-[#ddd] hover:bg-[#f5f5f5] p-10px hover:cursor-pointer">
            <NuxtLink :to="'/post/detail/' + item.id" class="text-[#555] no-underline">{{ item.post_title }}</NuxtLink>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { get_hottest_post } from '~/api';

const props = defineProps({
  post_id: {
    type: Number,
    required: true,
  },
});
const { data: hot_post, pending } = await useAsyncData('hottest-post-list', () => get_hottest_post(props.post_id), { server: true });

if (!pending.value && !hot_post.value) {
  hot_post.value = [];
}
</script>

<style scoped>
.title {
  color: #fff;
  background-color: #333333;
  font-size: 20px;
  padding: 10px;
  text-shadow: 0px 1px 2px #070402;
}
</style>
